<template>
  <div class="ecuUpdateDetailMain2 h100">
    <div class="ecuUpdateDetailMain2Top">
      <h4>
        <span style="font-weight: bold">{{ $t('vehicleInfor') }}</span
        ><span
          style="font-weight: 500; margin-left: 2px; color: #999"
        >({{ $t('format') }}：{{ $t('partNumber') }} [{{ $t('partName') }}] [{{ $t('softwareCoding') }}])</span
        >
      </h4>
    </div>
    <div class="ecuUpdateDetailMain2Bot">
      <!-- 零件列表start -->
      <div class="ecuUpdateDetailMainLeft">
        <full-parent-dom-with-dask :loading="loadingEcuLists"></full-parent-dom-with-dask>
        <ul class="ecuItems">
          <li
            class="ecuItemName"
            @click="changeEcu(ecu)"
            :class="{ active: ecu.ecuModuleId === activeEuModuleId }"
            v-for="ecu in ecuLists"
            :key="ecu.ecuId"
          >
            <a-tooltip
              placement="topLeft"
              :title="taskEcuUpdateDictCodeObj[ecu.status]"
              :getPopupContainer="$commonFun.getPopupContainer"
            >
              <i class="iconfont" :class="[statusIcons[ecu.status].name, statusIcons[ecu.status].class]"></i>
            </a-tooltip>
            <span>
              <table-ellipsis
                :text="`${ecu.ecuModuleId} [${ecu.ecuName}] [${ecu.softwareCode}]`"
              ></table-ellipsis>
            </span>
          </li>
          <li class="ecuItemName" v-if="loadingEcuLists === false && ecuLists.length === 0">{{ $t('noData') }}</li>
        </ul>
      </div>
      <!-- 零件列表end -->
      <div class="ecuUpdateDetailMainRight">
        <!-- 零件基本信息start -->
        <div class="ecuUpdateDetailMainRightTop">
          <full-parent-dom-with-dask :loading="false"></full-parent-dom-with-dask>
          <div class="top1">
            <!-- 零件ID -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis :text="$t('partNumber')"></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis
                  :text="activeEcuInfo.ecuModuleId || '-'"
                ></table-ellipsis>
              </span>
            </div>
            <!-- 诊断ID -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis :text="$t('diagnosisID')"></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis :text="activeEcuInfo.ecuDiaId || '-'"></table-ellipsis>
              </span>
            </div>
            <!-- 升级目标版本 -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis :text="$t('sjmbbb')"></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis
                  :text="activeEcuInfo.targetVersion || '-'"
                ></table-ellipsis>
              </span>
            </div>
            <!-- 配置文件原始版本 -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis
                :text="$t('configFileUpdateOriginVersion')"
              ></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis
                  :text="activeEcuInfo.configSourceVersion || '-'"
                ></table-ellipsis>
              </span>
            </div>
          </div>
          <div class="top2">
            <!-- 零件名称 -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis :text="$t('partName')"></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis :text="activeEcuInfo.ecuName || '-'"></table-ellipsis>
              </span>
            </div>
            <!-- 子诊断ID -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis :text="$t('softDid')"></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis :text="activeEcuInfo.ecuDid || '-'"></table-ellipsis>
              </span>
            </div>
            <!-- 配置文件DID -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis :text="$t('configurationFile')"></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis :text="activeEcuInfo.ecuDid || '-'"></table-ellipsis>
              </span>
            </div>
            <!-- 配置文件目标版本 -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis
                :text="$t('configFileUpdateTargetVersion')"
              ></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis
                  :text="activeEcuInfo.configTargetVersion || '-'"
                ></table-ellipsis>
              </span>
            </div>
          </div>
          <div class="top3">
            <!-- 软件编码 -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis :text="$t('softwareCoding')"></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis
                  :text="activeEcuInfo.softwareCode || '-'"
                ></table-ellipsis>
              </span>
            </div>
            <!-- 升级原始版本 -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis :text="$t('sjysbb')"></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis
                  :text="activeEcuInfo.sourceVersion || '-'"
                ></table-ellipsis>
              </span>
            </div>
            <!-- 配置文件软件编码 -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis
                :text="$t('configurationFileCode')"></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis
                  :text="activeEcuInfo.configSoftwareCode || '-'"
                ></table-ellipsis>
              </span>
            </div>
            <!-- 硬件版本号 -->
            <div class="descItem">
              <span
                class="descTitle"
              ><table-ellipsis
                :text="$t('hardVersion')"></table-ellipsis
              ></span>
              <span class="descValue">
                <table-ellipsis
                  :text="activeEcuInfo.hardVersion || '-'"
                ></table-ellipsis>
              </span>
            </div>
          </div>
        </div>
        <!-- 某零件在某批次升级情况 -->
        <div class="ecuUpdateDetailMainRightBot">
          <s-table
            class="h100"
            :columns="columns"
            :data-source="levelLists"
            :loading="loadingLevelLists"
            :showPagination="false"
            rowKey="traceId"
          >
            <template
              #updateLevel="text, record"
            ><table-ellipsis :text="getUpdateLevel(record.operationType)"></table-ellipsis
            ></template>
            <template
              #updateState="text, record"
            ><table-ellipsis :text="taskOperationTypeDictCodeObj[record.operationType] || '-'"></table-ellipsis
            ></template>
            <template
              #reportingTime="text"
            ><table-ellipsis :text="$commonFun.getDateTimeStr(text)"></table-ellipsis
            ></template>
            <template #installTime="text">
              <table-ellipsis :text="$commonFun.formatSeconds(text) || '-'"></table-ellipsis>
            </template>
            <template #message="text"><table-ellipsis :text="text || '-'"></table-ellipsis></template>
            <template #packageType="text"><table-ellipsis :text="getPackageTypeName(text)"></table-ellipsis></template>
            <template #operation="text, record">
              <a-spin :spinning="downing">
                <a-icon slot="indicator" type="loading" style="font-size: 16px" spin />
                <a @click="downLoadLog(record)">{{ $t('downLog') }}</a>
              </a-spin>
            </template>
          </s-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import { updateJdTbColumns } from '../config/list'
import taskApi from '@/api/modules/task'
import { downloadBlobFile } from '@/utils/functions'
import moment from 'moment'
export default {
  components: {
    TableEllipsis,
    STable,
    FullParentDomWithDask
  },
  props: {
    loadingEcuLists: {
      type: Boolean,
      default: false
    },
    ecuLists: {
      type: Array,
      default () {
        return []
      }
    },
    loadingLevelLists: {
      type: Boolean,
      default: false
    },
    levelLists: {
      type: Array,
      default () {
        return []
      }
    },
    activeEuModuleId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      statusIcons: {
        9: {
          name: 'icon-chenggong',
          title: '升级成功',
          class: 'successIcon'
        },
        2: {
          name: 'icon-jinhangzhong2',
          title: '正在升级',
          class: 'inIcon'
        },
        8: {
          name: 'icon-shibai-yin',
          title: '升级失败',
          class: 'failIcon'
        },
        3: {
          name: 'icon-weiwancheng',
          title: '未完成',
          class: 'unCompleteIcon'
        }
      },
      columns: updateJdTbColumns,
      activeTimeUpdateTbData: [{}],
      downing: false
    }
  },
  computed: {
    taskEcuUpdateDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskEcuUpdateDictCode')
    },
    taskOperationTypeDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskOperationTypeDictCode')
    },
    packageTypesObj () {
      return this.$store.getters.getDictCodeObj('packageTypes')
    },
    activeEcuInfo () {
      const obj = this.ecuLists.find((ecu) => ecu.ecuModuleId === this.activeEuModuleId)
      if (!obj) {
        return {}
      }
      return obj
    }
  },
  watch: {
    levelLists: {
      handler (val) {
        console.log('levelLists', val)
      },
      immediate: true
    }
  },
  created () {
    this.getPageDictData()
  },
  methods: {
    getUpdateLevel (status) {
      // eslint-disable-next-line no-param-reassign
      status *= 1
      if (!status) {
        return '-'
      }
      if (status < 20) {
        return this.$t('checkLevel')
      }
      if (status < 40) {
        return this.$t('downLevel')
      }
      return this.$t('installLevel')
    },
    changeEcu (record) {
      this.$emit('changeecu', record.ecuModuleId)
    },
    // 下载日志
    downLoadLog (record) {
      const params = {
        vin: record.vin,
        ecuId: record.ecuId,
        acceptTime: record.acceptTime,
        operationType: record.operationType,
        traceId: record.traceId
      }
      this.downing = true
      taskApi
        .downVehicleEcuDetailLog(params)
        .then((res) => {
          const fileName =
            params.vin + '_' + params.ecuId + '_' + moment(params.acceptTime).format('YYYYMMDDHHmmss') + '.log'
          downloadBlobFile(res, fileName)
        })
        .finally(() => {
          this.downing = false
        })
    },
    getPackageTypeName (text) {
      if (text === 1) {
        return this.$t('totalPackage')
      // eslint-disable-next-line no-else-return
      } else if (text === 2) {
        return this.$t('differentialPackage')
      }
      return '-'
    },
    getPageDictData () {
      ;['getTaskOperationTypeDictCodeData', 'getTaskEcuUpdateDictCodeData'].forEach((method) => {
        this.$store.dispatch(method)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.ecuUpdateDetailMain2 {
  display: flex;
  flex-direction: column;

  .ecuUpdateDetailMain2Top {
    flex: none;
    padding: 10px 0;
  }

  .ecuUpdateDetailMain2Bot {
    flex: 1 0 0;
    display: flex;
    border-top: 1px solid @borderColor;
    overflow: hidden;
  }

  .ecuUpdateDetailMainLeft {
    position: relative;
    padding-top: 10px;
    flex: 0 0 300px;
    height: 100%;
    overflow: auto;
    border-right: 1px solid @borderColor;

    .ecuItemName {
      // height: 41px;
      // line-height: 41px;
      margin-top: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding-left: 24px;
      box-sizing: border-box;
      width: 100%;
      > span {
        margin-left: 10px;
        flex: 1 0 0;
        font-size: 1em;
        overflow: hidden;
        padding-right: 20px;
      }

      &:hover {
        background-color: @blockHoverBgColor;
      }

      &.active {
        color: @blockHoverTextColor;
      }
    }

    .successIcon {
      color: #2bb080;
    }

    .inIcon {
      color: @primary-color;
    }

    .failIcon {
      color: #d81e06;
    }
  }

  .ecuUpdateDetailMainRight {
    flex: 1 0 0;
    height: 100%;
    overflow: auto;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    .ecuUpdateDetailMainRightTop {
      position: relative;
      flex: none;
      display: flex;
      justify-content: space-between;
      .top1 {
        flex: 32% 0 0;
      }

      .top2 {
        flex: 38% 0 0;
      }

      .top3 {
        flex: 26% 0 0;
      }

      .descItem {
        padding: 5px 0;
        font-size: 0.9em;
        display: flex;
      }

      .descTitle {
        font-weight: bold;
        flex: 138px 0 0;
        padding-right: 10px;
      }

      .descValue {
        flex: 1 0 0;
        font-size: 1em;
      }
    }
    .ecuUpdateDetailMainRightBot {
      flex: 1 0 0;
      min-height: 160px;
      margin-top: 10px;
    }
  }
}
</style>
